<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	    		xmlns:ui="http://java.sun.com/jsf/facelets"
	  			xmlns:h="http://java.sun.com/jsf/html"
	  			xmlns:f="http://java.sun.com/jsf/core"                
                xmlns:cs="http://myfaces.apress.com/custom"
				template="/WEB-INF/layouts/standard.xhtml"
				xmlns:a4j="http://richfaces.org/a4j"
				xmlns:rich="http://richfaces.org/rich"
				xmlns:c="http://java.sun.com/jstl/core">

	<ui:define name="headIncludes">	
		
		<style type="text/css">
	
		#webcam, #canvas {
			width: 320px;
			border:3px solid #333;
			background:#eee;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
		}
		
		#webcam {
			position:relative;
			margin-top:2px;
			margin-bottom:2px;
		}
		
		#webcam > span {
			z-index:2;
			position:absolute;
			color:#eee;
			font-size:10px;
			bottom: -16px;
			left:152px;
		}
		
		#webcam > img {
			z-index:1;
			position:absolute;
			border:0px none;
			padding:0px;
			bottom:-40px;
			left:89px;
		}
		
		#webcam > div {
			border:5px solid #333;
			position:absolute;
			right:-90px;
			padding:5px;
			-webkit-border-radius: 8px;
			-moz-border-radius: 8px;
			border-radius: 8px;
			cursor:pointer;
		}
		
		#webcam a {
			background:#fff;
			font-weight:bold;
		}
		
		#webcam a > img {
			border:0px none;
		}
		
		</style>

		<script type="text/javascript" src="${request.contextPath}/scripts/jquery/jquery.js"></script>
		<script type="text/javascript" src="${request.contextPath}/scripts/jquery/webcam/jquery.webcam.js"></script>
	
	
	
		<script type="text/javascript">
					
			function setImage(im) {
				var ee = document.getElementById('snap');
				while (ee.hasChildNodes()) {
			        ee.removeChild(ee.firstChild);
			    }			   
	            var element1 = document.createElement("img");
	            element1.src = "${request.contextPath}/" + im;
	            element1.id = "imgctrl";
	            element1.alt = "No Protograph";
	            element1.width= 320;
	            element1.height=240; 
	            ee.appendChild(element1);	            
			}

			function showLarge(ev,tar,url) {
				var ee = document.getElementById('imageEnlarged');
				ee.style.left = (ev.pageX + 50)+"px";
				ee.style.top = (ev.pageY - 120 )+"px";
		        ee.src=url; 
				ee.style.visibility="visible";				
			}
			
			function hideLarge() {
				var ee = document.getElementById('imageEnlarged');
		        ee.src="";
				ee.style.visibility="hidden";
			}

			var superdata = "";

			function loadCam() {

				jQuery("#webcam").webcam({
				
					width: 320,
					height: 240,
					mode: "callback",
					swffile: "${request.contextPath}/webcam/jscam.swf",
				
					onTick: function(remain) {						
					},
				
					onSave: function(data) {
						superdata+=data + "|";
					},
				
					onCapture: function () {
				
						superdata="";
						webcam.save();
				
						$.post(  "${request.contextPath}/bss/images/click", { data1: superdata},
								  function(dta) {				  					   
						            clicked(dta);				   
								   }, "html");
					},
				
					debug: function (type, string) {		
					},
				
					onLoad: function () {
					}
				});
			}
		
			function clicked(im) {
				try {
					setImage(im);
				}catch(e) {				
					alert(e);				
				}
			}
		</script>
				
	</ui:define>

	<ui:define name="content">	
	
			<c:set var="controller" value="${patientController}" />
											
			<h4>New #{controller.modelName}</h4>
			
			<h:messages errorClass="errors" style="color:#ff1111" />
			
			<h:form id="#{controller.modelName}form">															
									
				<fieldset>
								
					<div class="field">
						<div class="label">
							Photograph <c:if test="${not controller.editing}">
								<a href="#" onclick="javascript:webcam.capture();">								
									<img src="${request.contextPath}/webcam/camera_icon.gif" alt="click"/></a>
								</c:if>	
						</div>
						<div class="input">										
							<table>
								<tr>
									<td>
										<div id='snap'>
											<img id="imgctrl" src="" alt="No Photograph"/><span>Click Photograph</span>
										</div>								
									</td>
									<td>
										<div id="webcam">
											<span>&nbsp;</span>
										</div>
									</td>
								</tr>
							</table>																	
						</div>
					</div>
					
					<script type="text/javascript">
						loadCam();						
					</script>
		
					<div class="field">
						<div class="label">First Name:</div>
						<div class="input">
							<h:inputText value="#{controller.model.firstName}">
							</h:inputText>						
						</div>
					</div>
					<div class="field">
						<div class="label">Middle Name:</div>
						<div class="input">
							<h:inputText value="#{controller.model.middleName}">
							</h:inputText>
						</div>
					</div>
					<div class="field">
						<div class="label">Last Name:</div>
						<div class="input">
								<h:inputText value="#{controller.model.lastName}">
								</h:inputText>
						</div>
					</div>
					<div class="field">
						<div class="label">Address:</div>
						<div class="input">
								<h:inputText value="#{controller.model.address}">
								</h:inputText>						
						</div>
					</div>				
					<div class="field">
						<div class="label">Gender:</div>
						<div class="input">
							<h:selectOneRadio value="#{controller.model.sex}">
								<f:selectItem itemLabel="Male" itemValue="M"/>
								<f:selectItem itemLabel="Female" itemValue="F"/>
							</h:selectOneRadio>						
						</div>
					</div>		
					<div class="field">
						<div class="label">ID Card Type</div>
						<div class="input">
							<rich:comboBox 	value="#{controller.model.idCardType}"
											suggestionValues="#{idCardTypesDao.all}"
											converter="#{idCardTypeConverter}"
											enableManualInput="false">								
							</rich:comboBox>
						</div>
					</div>
					<div class="field">
						<div class="label">ID Card Number:</div>
						<div class="input">
								<h:inputText value="#{controller.model.idCardNumber}">
								</h:inputText>
						</div>
					</div>
					<div class="field">
						<div class="label">Phone Number:</div>
						<div class="input">
								<h:inputText value="#{controller.model.phone}">
								</h:inputText>						
						</div>
					</div>
					<div class="field">
						<div class="label">Profession</div>
						<div class="input">
							<rich:comboBox	value="#{controller.model.profession}"
											suggestionValues="#{professionDao.all}"
											converter="#{professionConverter}"
											enableManualInput="false">								
							</rich:comboBox>
						</div>
					</div>
						
				</fieldset>
				
					<div class="buttonGroup" style="text-align: center;">
						<h:commandButton disabled="#{controller.editing}" id="submit" action="#{controller.add}" value="Add"/>&#160;
						<h:commandButton disabled="#{!controller.editing}" action="#{controller.update}" value="Update"/>&#160;
						<h:commandButton value="Cancel" action="#{controller.cancel}"/>
					</div>		

				<rich:dataTable value="${controller.data}" var="aBean" align="center">
					<f:facet name="header">
						<h:outputText value="All ${controller.modelName}s"/>
					</f:facet>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Edit" />
						</f:facet>							
						<h:commandButton title="#{controller.editing ? 'Edit already in progress...':'Click to Edit'}" image="/resrc/images/edit1.jpg" disabled="#{editing}" immediate="true" 
						style="width:15px;height:15px;#{controller.editing ? 'cursor: not-allowed':''}" action="select"/>
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Delete"/>
						</f:facet>							
						<h:commandButton title="#{controller.editing ? 'Edit is in progress, please complete the editing...':'Click to Delete'}" image="/resrc/images/cross1.jpg" 
							style="width:15px;height:15px;#{controller.editing ? 'cursor: not-allowed':''}" 
							disabled="#{editing}" immediate="true"  action="delete"
							onclick="if(!showConfirmation('Are you sure to remove Patient #{aBean.firstName} #{aBean.middleName} #{aBean.lastName} ?')) return false;"/>
					</rich:column>
					<rich:column>
						<f:facet name="header">Name</f:facet>
						<h:outputText value="#{aBean.lastName}, #{aBean.firstName} #{aBean.middleName} "/>
					</rich:column>
					<rich:column style="text-align:center" >
						<f:facet  name="header">Photograph</f:facet>
						<h:graphicImage width="50" height="37" url="/bss/images/saved?id=#{aBean.id}"
							onmouseout="hideLarge()" style="border-width: 1px; border-style:solid; border-color:black;"
							onmouseover="showLarge(event,this,'#{request.contextPath}/bss/images/saved?id=#{aBean.id}');"/>
					</rich:column>												
					<c:if test="#{controller.data.rowCount le 0}">
						<f:facet name="footer">
							<h:outputText value="No #{controller.modelName}s available..." />
						</f:facet>
					</c:if>					
				</rich:dataTable>
			</h:form>
			
			<img id="imageEnlarged" src="" width="320" height="240" 
				alt="No Image" style="position:absolute; visibility: hidden; border-width: 2px; border-style:solid; border-color:red;"/>				
	</ui:define>
</ui:composition>